import React,{Component} from 'react'
import { Checkbox, Row, Col,Button } from 'antd';

class CheckboxGroup extends Component{
    constructor(props){
        super(props)
        this.state = {
            plainOptions:[],
            checkedList:[]
        }
    }
    handleChange(checkedValues){
        console.log('checked = ', checkedValues);
        this.checkedListChange(checkedValues)
    
    }
    handleClickAll(){
        this.checkedListChange(this.state.plainOptions)
    }
    handleClick(){
        const allSet =new Set(this.state.checkedList)
        console.log(allSet)
        const arr =[];
        this.state.plainOptions.map((item) => {
            if(!allSet.has(item)){
                arr.push(item)
            }
        })
        this.checkedListChange(arr)
       
    }
    clearChecked(){
        this.checkedListChange([])
        
    }
    checkedListChange(checkedList){
        this.setState({
            checkedList:checkedList
        })
        this.props.onChange(this.props.checkboxArr.service_name,checkedList)
    }
    componentDidMount(){
        const arr = this.props.checkboxArr
        let plainOptions = [];
        arr.action_list.map((item)=>{
            plainOptions.push(item.id)
        })

        this.setState({
            plainOptions:plainOptions,
        })
    }
    render(){
        const arr = this.props.checkboxArr;
        return (
            <div>
                <div>
                    <span>{arr.display_name}</span>
                    <Button onClick={this.handleClickAll.bind(this)}>全选</Button>
                    <Button onClick={this.handleClick.bind(this)}>反选</Button>
                    <Button onClick={this.clearChecked.bind(this)}>取消选中</Button>
                </div>
                <Checkbox.Group onChange={this.handleChange.bind(this)} value={this.state.checkedList} >
                    <Row>
                        {arr.action_list.map(item => <Col key={item.id} title={`ID:${item.id} | ${item.action_name}`} span={8}><Checkbox value={item.id}>{item.display_name}</Checkbox></Col>)}
                    </Row>
                </Checkbox.Group>
            </div>
        )
    }
}

export default CheckboxGroup